<%@include file="/WEB-INF/jsp/include/importAndtag.inc"%>
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page contentType="text/html; charset=UTF-8" %>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="Cache-Control" content="no-cache" />
	
	<title><s:text name="Login"/></title>
	<%@include file="/WEB-INF/jsp/include/pageHeader.inc"%>
	<link rel='stylesheet' id='camera-css'  href='js/plugin/jqueryCamera/css/camera.css' type='text/css' media='all'> 
	<style type="text/css">
		body{
			font-size: 12px;
			line-height: 20px;
		}
		.slide-area{
				
		}
		.form-signin{
			max-width: 300px;
			padding:10px 20px 20px;
			background: #fff;
			border: 1px solid #282828;
			border-top:#282828 4px solid;
			-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
			-moz-box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
			box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
		}
		.form-signin-heading{
			font-weight: normal;
			font-size: 18px;
			margin-bottom: 5px;
			border-bottom: #eee 1px solid;
			padding-bottom: 8px;
			line-height: normal;
			text-transform: uppercase;
		}
		.input-block-level{
			width: 230px;
			background-color: #fff;
			border: 1px solid #d4d4d4;
			-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
			-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
			-o-transition: border linear 0.2s, box-shadow linear 0.2s;
			transition: border linear 0.2s, box-shadow linear 0.2s;
			color: #555555;
			vertical-align: middle;
			display: inline-block;
			font-size: 14px;
			height: auto;
			margin-bottom: 15px;
			padding: 6px 6px 6px 30px;
		}
		.input-icon i{
			font-family: FontAwesome;
			position: absolute;
			top: 24px;
			left: 8px;
			font-size: 16px;
			color: #666;
		}
		.icon-user-md:before{
			content: "\f0f0";
		}
		.icon-key:before{
			content: "\f084";
		}
		.input-icon{
    		position: relative;
		}
		.btn-login{
			display: block;
			width: 100%;
			box-sizing: border-box;
			margin-bottom: 0;
			text-align: center;
			vertical-align: middle;
			cursor: pointer;
			padding: 6px 12px;
			border: rgba(0, 0, 0, .1) 1px solid;
		}
		.btn-signin:hover{
			color: #ffffff;
			background-color: #111111;
		}
		.btn-signin{
			margin-bottom: 5px;
			color: #ffffff;
			background-color: #282828;
			width:100px;
			display: inline-block;
			margin-right: 10px;
			font-size:13px;
		}
		.btn-success:hover{
			color: #ffffff;
			background-color: #014401;
		}
		.btn-success{
			color: #ffffff;
			background-color: #009600;
		}
		.form-signin h4 {
			display: block;
			font-weight: normal;
			font-size: 13px;
			margin-bottom: 5px;
			border-top:#C0BABA 1px dotted;
			padding-top:4px;
		}
		.form-signin h5{
			margin:10px 0;
			font-weight: normal;
			font-size: 14px;
		}
	</style>
	
    <script type='text/javascript' src='js/plugin/jqueryCamera/scripts/jquery.mobile.customized.min.js'></script>
    <script type='text/javascript' src='js/plugin/jqueryCamera/scripts/jquery.easing.1.3.js'></script> 
    <script type='text/javascript' src='js/plugin/jqueryCamera/scripts/camera.min.js'></script> 
	
	<script type="text/javascript">
		$(document).ready(function() {
			
			/*$(document).keyup(function(event){
			   	if(event.keyCode==13) {
			   		$("#loginBtn").trigger("click");
			   	}
		   	});
			*/
			jQuery('#saas_wrap').camera({
				thumbnails: true,
				loader:'bar',
				barPosition:'bottom',
				playPause: false,
				height:'300px'
			});
		});

	
		function loginSubmit() {
		 	var form = document.loginForm;
		 	var username = $.trim($("#username").val());
		    var paw = $.trim($("#password").val());
		    
		    //validate the username and password
		    if (username == null || username ==''){
		    	showErrorMessage("<s:text name='msg.username.input'/>");
		        return ;
		    }
		    if (paw == null || paw ==''){
		    	showErrorMessage("<s:text name='msg.password.input'/>");
		        return ;
		    }
		    
		    //login
		    $("#loginBtn").html('<s:text name="Signin"/>&nbsp;<span class="ani_dot">...</span>');
		     $.post("${pageContext.request.contextPath}/loginSubmit.action",{"user.shortName":username,"user.password":paw},function(data){
		     	if(data!=null){
		     		if(data.OPERATE_SUCCESS != null && data.OPERATE_SUCCESS == true){
		     			var visitUrl = "${pageContext.request.contextPath}/appmodules/applicationModules.action";
		     			
		     			window.location.href = visitUrl;
		     		}else{
		     			showErrorMessage(data.ERROR_MSG);
		     		}
		     	}
		     });
		}
		
		function showErrorMessage(errorMessage){
			$("#errormes-area span.errormsg").remove();
			if(errorMessage != null && $.trim(errorMessage).length>0){
				$("#errormes-area").append('<span role="alert" class="errormsg">'+errorMessage+'</span>');
			}
			$("#loginBtn").html('<s:text name="Signin"/>');
		}
	</script>
</head>

<body>
<div style="position: relative;background: #eee;">
<%@include file="../include/bodyHeader.inc" %>
<%@include file="../include/navigationMenu.inc" %>
<!-- 图片切换位置 -->
<div class="slide-area">
		<div class="camera_wrap camera_azure_skin" id="saas_wrap">
            <div data-thumb="js/plugin/jqueryCamera/images/slides/thumbs/bridge.jpg" data-src="js/plugin/jqueryCamera/images/slides/bridge.jpg">
                <div class="camera_caption fadeFromBottom">
                    Quantum Compliance provides Environmental Health and Safety (EH&S) software solutions that help businesses implement and maintain compliant and sustainable EH&S practices. 
                </div>
            </div>
            <div data-thumb="js/plugin/jqueryCamera/images/slides/thumbs/leaf.jpg" data-src="js/plugin/jqueryCamera/images/slides/leaf.jpg">
                <div class="camera_caption fadeFromBottom">
                    云销通将所有的产品信息储存，根据左侧产品分类或关键字搜索，可以快速轻易查找到客户感兴趣的产品，在这里客户可以浏览产品图片，具体描述、价格等信息。
                </div>
            </div>
            <div data-thumb="js/plugin/jqueryCamera/images/slides/thumbs/road.jpg" data-src="js/plugin/jqueryCamera/images/slides/road.jpg">
                <div class="camera_caption fadeFromBottom">
                    <em>It's completely free</em> (even if a donation is appreciated)
                </div>
            </div>
        </div><!-- #camera_wrap_1 -->
	
</div>
<div>
	<div class="mainArea">
		<div style="display: inline-block; width: 630px;height: 200px;">
		</div>
		<div style="display: inline-block;margin-top: -40px;">
			<!-- login form -->
			<form class="form-signin" name="loginForm" id="loginForm"  method="post" novalidate="novalidate">
				<h3 class="form-signin-heading">Please sign in</h3>
				<div class="controls input-icon">
					<label for="Email"><s:text name="UserName"/></label><br/>
					<i class="icon-user-md"></i>
					<input name="user.shortName" type="text" id="username" class="input-block-level">
				</div>
				<div class="controls input-icon">
				  <label for="Passwd"><s:text name="Password" /></label><br/>
				  <i class="icon-key"></i>
				  <input name="user.password" type="password" id="password" class="input-block-level" style="margin-bottom:5px;"/>
				</div>
				<div id="errormes-area">
					<span role="alert" class="errormsg"></span>
				</div>
				<div>
					<button id="loginBtn" class="btn-login btn-signin" onclick="loginSubmit();return false;"><s:text name="Signin"/></button> 
					<span style="font-size: 12px;text-decoration: underline;">Forgot your password?</span>
				</div>
				<div style="margin-top: 10px;">
					<h4><s:text name="msg.login.dont_have_account"/></h4>
					<button class="btn-login btn-success" >Create Account</button>
				</div>
			</form>
		</div>
	</div>
</div>

<div style="clear:both; display:block; height:100px"></div>
<%@include file="../include/pageFooter.inc" %>
</div>
</body>
</html>	